<template>
  <div>
    <el-header>
      <el-row><el-col :span="3"> 创建服务 </el-col></el-row>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" :rules="formrules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户编号" prop="CusID">
              <el-select
                v-model="form.CusID"
                placeholder="请选择客户编号"
                style="width: 100%"
              >
                <el-option
                  v-for="item in type1"
                  :key="item.CusName"
                  :label="item.CusID"
                  :value="item.CusID"
                >
                  <span style="float: left">{{ item.CusName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.CusID
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="40">
            <el-form-item label="服务类型" prop="STID">
              <el-select
                v-model="form.STID"
                placeholder="请选择服务类型"
                style="width: 242%"
              >
                <el-option
                  v-for="item in type"
                  :key="item.STID"
                  :label="item.STName"
                  :value="item.STID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="服务概要" prop="CSTitle">
          <el-input v-model="form.CSTitle"></el-input>
        </el-form-item>
        <el-form-item label="详细信息" prop="CSDesc">
          <el-input type="textarea" v-model="form.CSDesc"></el-input>
        </el-form-item>
        <el-col :span="6" :offset="18">
          <el-form-item>
            <el-button type="primary" @click="fwtj('form')">立即创建</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-main>
  </div>
</template>

<script>
import { infw, Getlx, Getsy } from "../http/user.js";
import qs from "qs";
export default {
  data() {
    return {
      type: [],
      type1: [],
      form: {
        CusID: "",
        CSTitle: "",
        CSDesc: "",
        STID: "",
        CSCreateID: "",
      },
      formrules: {
        CusID: [{ required: true, message: "请输入客户编号", trigger: "blur" }],
        CSTitle: [{ required: true, message: "请输入概要", trigger: "blur" }],
        CSDesc: [
          { required: true, message: "请输入详细信息", trigger: "blur" },
        ],
        STID: [{ required: true, trigger: "blur", message: "类型不能为空" }],
      },
    };
  },
  methods: {
    fwtj(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          infw(qs.stringify(this.form))
            .then((res) => {
              console.log(res);
              if (res.Message == "添加数据成功") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.form.CusID = "";
                this.form.CSTitle = "";
                this.form.CSDesc = "";
                this.form.STID = "";
                this.form.CSCreateID = "";
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
  },
  mounted() {
    this.form.CSCreateID = this.$store.state.UserID;
    Getlx()
      .then((res) => {
        this.type = res.Data;
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
    Getsy()
      .then((res) => {
        this.type1 = res.Data;
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-3 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
</style>